<!--选择城市-->
<template>
  <view class="page-select-city">
    <view class="search-shadow-wrapper" :class="{shadow: hideCityBox}">
      <basic-nav-bar 
        class="basic-nav-bar"
        left-icon="arrowleft" 
        statusBar
        :border="false" 
        :fixed="true"
        title="城市选择" 
        @clickLeft="goList" />

      <basic-search-bar
        class="basic-search-bar"        
        placeholder="请输入城市名称/拼音"
        radius="40"
        bgColor="#F1F4F9"
        cancelButton="none"
        clearButton="auto"
        fixedPageEl=".page-select-city"
        @input="handleInput"
        @confirm="handleConfirm"
      />
    </view>

    <view class="content-wrapper" :style="contentStyle">
      <!-- 全部城市列表 -->
      <city-box
        v-if="paramsInited"
        :options="options"
        :showLocation="showLocation"
        :showHistory="showHistory"
        :showHot="showHot"></city-box>

      <!-- 搜索结果列表 -->
      <template v-if="hideCityBox || keywords">
        <search-result :keywords="keywords" :list="searchResults"></search-result>
      </template>
    </view>

    <!-- 无搜索结果 -->
    <search-empty
      v-if="hideCityBox && searchResults.length===0"
      emptyWord="没有找到你要的城市，换个地方再试试吧"
      :styles="{
        position: 'absolute',
        top:'50%',
        width: '100%',
        textAlign: 'center',
        transform:'translateY(-50%)',
        zIndex: '2'
      }"/>
  </view>
</template>
<script>
  import sdk from 'sdk'
  import { searchCity } from 'api'
  import cityBox from './components/city-box'
  import searchResult from './components/search-result'
  import searchEmpty from '@/components/business/search-empty'
  import {decodeQueryObject} from 'utils/helper/query'
  export default {
    name: 'page-select-city',
    
    components: { cityBox, searchResult, searchEmpty },

    data() {
      return {
        placeholder: '请输入城市名称/拼音',
        keywords: '',
        contentStyle: {},
        hideCityBox: false, // 当前输入框是否聚焦
        searchResults: [],
        options: {
          productType: 0
        },

        showLocation: false, // 是否显示定位
        showHistory: false, // 是否显示最近浏览城市
        showHot: false, // 是否显示热门城市
        paramsInited: false // 是否已初始化参数（小程序环境下父组件和子组件几乎同时初始化）
      }
    },

    onReady() {
      this.$nextTick(() => {
        this.getContentStyle()
      })
    },

    onLoad(query){
      // 清空之前缓存的数据，防止旧数据干扰
      sdk.selectCity({})

      this.initParams(query)
    },

    methods: {
      initParams(query) {
        let options = decodeQueryObject(query)

        if (options.location) this.showLocation = true
        if (options.history) this.showHistory = true
        if (options.hot) this.showHot = true

        delete options.location
        delete options.history
        delete options.hot

        this.options = {
          ...this.options,
          ...options
        }

        this.paramsInited = true
      },
      handleConfirm() {
        const item = this.searchResults.length > 0 ? this.searchResults[0] : null
        if(item != null){
          sdk.selectCity({
            regionId: String(item.regionId),
            name: item.name,
            country: 0
          })
          sdk.navigateBack() 
        }
      },      
      async getContentStyle() {
        let navOffset = await sdk.getOffset('.basic-search-bar')
        let searchOffset = await sdk.getOffset('.basic-nav-bar')

        // 此写法保证布局变更时页面无抖动
        this.contentStyle = `position:absolute;top:${navOffset.height + searchOffset.height}px;bottom:0;left:0;right:0`
      },
      handleInput(data={}) {
        this.keywords = data.value || ''

        if(!data.value || data.value == '') {
          this.searchResults = []
          this.hideCityBox = false
          return
        }

        this.hideCityBox = true
        let productType = 0
        if(this.options && this.options.productType){
          productType = this.options.productType
        }
        searchCity({ productType , keyword: data.value}).then(res => {
          let {regionInfos = []} = res.result || []

          this.searchResults = regionInfos
        })
      }
    }
  }
</script>
<style lang="less">
.page-select-city {
  background-color: #fff;

  .content-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .shadow {
    border-bottom: 0;     
    box-shadow: 0 4rpx 16rpx 0 rgba(140, 163, 212, 0.1);
    position: relative;
    z-index: 1000;
  }

  /*  #ifdef  H5  */
  /deep/ .uni-searchbar__box {
    border: none;
  }
  /deep/ .uni-searchbar {
    border-bottom: 2rpx solid #FAFAFA;
  }
  /*  #endif  */
}

</style>